<template>
  <dv-border-box-10 :color="['#50649a', '#50649b']">
    <div id="PThreeRatio"></div
  ></dv-border-box-10>
</template>

<script>
import * as echarts from "echarts/core";
import { GaugeChart } from "echarts/charts";
import { CanvasRenderer } from "echarts/renderers";
import { zhuti } from "@/assets/index.js";
import pubsub from "pubsub-js";
export default {
  name: "PersonalThreeRatio",
  data() {
    return {
      threeRatio: [], //出勤率，抬头率，点头率
      stuId: "", // 订阅的消息
    };
  },
  created() {
    this.initializeThreeRatios();
  },
  mounted() {
    this.$nextTick(() => {
      this.pubId = pubsub.subscribe("selectStuInfo", (msgName, data) => {
        console.log("学生个人三率,", data);
        this.stuId = data.stuId;
        this.initializeThreeRatios();
        this.initialize();
      });
    });
    this.initialize();
  },
  methods: {
    initializeThreeRatios() {
      console.log("学生个人三率Echarts 数据 初始化");
      this.threeRatio = [];
      for (let i = 0; i < 3; i++) {
        let randomNumber = 0.0;
        if (i == 0) {
          randomNumber = (Math.random() * (90 - 80) + 80).toFixed(2);
        } else {
          randomNumber = (Math.random() * (95 - 50) + 50).toFixed(2); // 生成50到100之间的随机数
        }
        this.threeRatio.push(randomNumber);
      }
      console.log("学生个人三率Echarts 数据 初始化 结束");
    },
    initialize() {
      console.log("学生个人三率Echarts 图表 初始化");
      echarts.use([GaugeChart, CanvasRenderer]);

      var chartDom = document.getElementById("PThreeRatio");
      var myChart = echarts.init(chartDom, zhuti);
      var option;

      console.log(chartDom);

      let threeRatio = this.threeRatio;

      const gaugeData = [
        {
          value: threeRatio[0],
          name: "出勤率",
          title: {
            offsetCenter: ["0%", "-55%"],
          },
          detail: {
            valueAnimation: true,
            offsetCenter: ["0%", "-33%"],
          },
        },
        {
          value: threeRatio[1],
          name: "抬头率",
          title: {
            offsetCenter: ["0%", "-10%"],
          },
          detail: {
            valueAnimation: true,
            offsetCenter: ["0%", "10%"],
          },
        },
        {
          value: threeRatio[2],
          name: "点头率",
          title: {
            offsetCenter: ["0%", "33%"],
          },
          detail: {
            valueAnimation: true,
            offsetCenter: ["0%", "53%"],
          },
        },
      ];
      option = {
        series: [
          {
            type: "gauge",
            startAngle: 90,
            endAngle: -270,
            radius: "95%",
            pointer: {
              show: false,
            },
            progress: {
              show: true,
              overlap: false,
              roundCap: true,
              clip: false,
              itemStyle: {
                borderWidth: 0.5,
                borderColor: "#464646",
              },
            },
            axisLine: {
              lineStyle: {
                width: 25,
              },
            },
            splitLine: {
              show: false,
              distance: 0,
              length: 10,
            },
            axisTick: {
              show: false,
            },
            axisLabel: {
              show: false,
              distance: 50,
            },
            data: gaugeData,
            title: {
              fontSize: 14,
              color: "#fff",
            },
            detail: {
              width: 40,
              height: 10,
              fontSize: 12,
              color: "inherit",
              borderColor: "inherit",
              borderRadius: 20,
              borderWidth: 0.5,
              formatter: "{value}%",
            },
          },
        ],
      };

      // 2秒进行一次切换
      setInterval(function () {
        // gaugeData[0].value = +(Math.random() * (90 - 80) + 80).toFixed(2);
        gaugeData[1].value = +(Math.random() * (95 - 60) + 60).toFixed(2);
        gaugeData[2].value = +(Math.random() * (95 - 50) + 50).toFixed(2);
        myChart.setOption({
          series: [
            {
              data: gaugeData,
              pointer: {
                show: false,
              },
            },
          ],
        });
      }, 2000);

      option && myChart.setOption(option);
      console.log("学生个人三率Echarts 图表 初始化 结束");
    },
  },

  beforeDestroy() {
    pubsub.unsubscribe(this.pubId);
  },
};
</script>

<style>
#PThreeRatio {
  width: 100%;
  height: 100%;
  /* transform: scale(0.9); */
}
</style>
